import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import BodyChild from './bodychild'
import PropTypes from 'prop-types';  
import ReactMixin from 'react-mixin';
import MixinLog from './mixins';

export default class IndexBody extends Component{
    constructor(){
        super();//调用基类所有初始化方法
        this.state={
            username:"hello pig",
            age:20
         };
    }
    changeUserInfo(age){
        this.setState({age:age});

  /*       var mySubmitButton = document.getElementById('submitButton');
        ReactDOM.findDOMNode(mySubmitButton).style.color='red'; */

        this.refs.submitButton.style.color='red';
        MixinLog.log();
    };
    onChildBodyChange(event){
        this.setState({username:event.target.value})
    }


    render(){
     
   
        return(
            <div>
                <h2>这里是主体</h2>
                <BodyChild {...this.props} onChildBodyChange={this.onChildBodyChange.bind(this)}/>
                <p>{this.state.username}</p>
                <p>{this.state.age}</p>
                <p>{this.props.username} {this.props.userid}</p>
                <input id="submitButton" ref="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
            </div>
        );
    }
}


IndexBody.propTypes={
    userid:PropTypes.number
};

ReactMixin(IndexBody.prototype,MixinLog);